<template>
    <el-container style="width:1100px">

        <el-card shadow="always" style="margin:0 20px">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="优惠管理" name="1"></el-tab-pane>
            </el-tabs>
        </el-card>

        <el-main>
            <el-card shadow="always" style="height:600px">
                <el-form inline style="margin:10px">
                    <el-form-item>
                        <el-input style="width:300px" v-model="formInline.input" size="large" :prefix-icon="Search" />
                    </el-form-item>
                    <el-form-item>
                        <el-button size="large">搜索</el-button>
                    </el-form-item>

                    <el-form-item label="商品类型:">
                        <el-select v-model="formInline.state" placeholder="全部" style="width:150px">
                            <el-option label="全部" value="20001" />
                            <el-option label="视频课" value="20002" />
                            <el-option label="线下课" value="20003" />
                            <el-option label="直播课" value="20004" />
                        </el-select>
                    </el-form-item>
                </el-form>

                <div class="youhui">
                    <div style="font-size:14px; margin-left:10px ;margin-bottom: 20px">添加优惠商品<span
                            style="color:deeppink">0</span>件
                    </div>
                    <div>
                        <el-button color="deeppink">+ 添加优惠价商品</el-button>
                    </div>
                </div>

                <el-table>
                    <el-table-column align="center" label="内容" width="300px"></el-table-column>
                    <el-table-column align="center" label="发布时间"></el-table-column>
                    <el-table-column align="center" label="开课时间"></el-table-column>
                    <el-table-column align="center" label="优惠时间"></el-table-column>
                    <el-table-column align="center" label="原价"></el-table-column>
                    <el-table-column align="center" label="优惠价"></el-table-column>
                    <el-table-column align="center" label="平台服务费"></el-table-column>
                    <el-table-column align="center" label="操作"></el-table-column>
                </el-table>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Search } from "@element-plus/icons-vue"
const activeName = ref('1')
const formInline = ref({
    state: '',
    input: ''
})
</script>

<style scoped>
.el-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.youhui {
    display: flex;
    justify-content: space-between;
}
</style>
